<template name="home">
	<view>
		<scroll-view>
			<!-- 轮播 -->
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<a :href="item.hrefUrl" target="_blank">
						<image :src="item.image" mode="aspectFill" v-if="item.swiperType=='image'"></image>
						<video :src="item.image" autoplay loop muted :show-play-btn="false" :controls="false"
							objectFit="cover" v-if="item.swiperType=='video'"></video>
					</a>
				</swiper-item>
			</swiper>
		<view class=" cu-bar nav-list1  bg-white solid-bottom">
			<navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li1" navigateTo :class="'bg-'+item.color"
			 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
				<!-- <view :class="'cuIcon-' + item.cuIcon"></view> -->
				<view class="title">{{item.title}}</view>
				<!-- <view class="nav-name">{{item.name}}</view> -->
				
			</navigator>
		</view>
		<!-- 	<view class="cu-bar bg-white solid-bottom" :style="[{animation: 'show 0.5s 1'}]">
				<view class="action">
					<text class="cuIcon-titles text-orange"></text>公告

				</view>
			</view> -->
			<uni-notice-bar show-get-more show-icon scrollable text="年末大礼uni-app1.4 新增百度、支付宝小程序"  @getmore="getMore" showGetMore  background-color="#FFFFFF" />
			<!-- 常用服务 -->
			<view class="cu-bar bg-white solid-bottom" :style="[{animation: 'show 0.5s 1'}]">
				<view class="action">
					<text class="cuIcon-titles text-orange"></text>数字藏品
				</view>
			</view>


			<!-- 展示样式 2 
			<view class="cu-card ">
				<view class="cu-item  shadow-blur " @tap="toChild" :data-url="item.goodsImg"
					v-for="(item,index) in saleList" :key="index">
					<view class="flex flex-wrap ">
						<image :src="item.goodsImg" mode="widthFix"
							class=" basis-sm margin-xs padding-sm radius radius margin-left"></image>
						<view class="flex flex-wrap basis-df margin-xs padding-sm radius">
							<view class="grid margin-bottom text-center ">
								<view class="padding">
									<view class="text-gray justify-between">
										{{item.goodName}}

									</view>
								</view>
								<view class="padding">
									<view>

										<view class="cu-capsule round">
											<view class='cu-tag bg-blue sm'>
												限量
											</view>
											<view class="cu-tag line-blue sm">
												{{item.goodsNum}}
											</view>
										</view>
										<view class="cu-tag bg-red" v-show="item.goodsStatus==0">
											{{item.goodsStatus_dictText}}</view>
										<view class="cu-tag bg-blue" v-show="item.goodsStatus==1">
											{{item.goodsStatus_dictText}}</view>
										<view class="cu-tag bg-green" v-show="item.goodsStatus==2">
											{{item.goodsStatus_dictText}}</view>
									</view>
								</view>
								<view class="padding">
									
									<view class="text-gray text-sm flex justify-between">
										{{item.author_dictText}}
										<view class="cu-capsule radius">
											<view class='cu-tag bg-brown sm'>
												￥
											</view>
											<view class="cu-tag line-brown sm">
												{{item.price}}
											</view>
										</view>
									</view>
								</view>
							</view>



						</view>

					</view>


				</view>
			</view>-->

			<view v-for="item in saleList" :key="item.id" class="ui-grid ui-cols-2 margin-bottom-sm"
				@click="toPage(item.id)" :style="[{animation: 'show 0.5s 1'}]">
				<view class="cu-card case no-card menu-avatar">
					<view class="cu-item shadow">
						<view class="image shadow-lg">
<image :src="item.goodsImg" mode="widthFix"
							class=" basis-sm margin-xs padding-sm radius radius "></image>
							<!-- <image :src="item.goodsImg" mode="widthFix"></image> -->
							<!-- 售完 -->
							<view class="cu-tag bg-red" v-show="item.goodsStatus==0">{{item.goodsStatus_dictText}}
							</view>
							<!-- 预售 -->
							<view class="cu-tag bg-blue" v-show="item.goodsStatus==1">{{item.goodsStatus_dictText}}
							</view>
							<!-- 进行中 -->
							<view class="cu-tag bg-green" v-show="item.goodsStatus==2">{{item.goodsStatus_dictText}}
							</view>

							<!-- <view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></view> -->
						</view>
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="cu-avatar radius margin-left"
									style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg;height: 414rpx;);">
								</view>
								<view class="content flex-sub">
									<!-- <view class="text-grey">鱼跃龙门</view> -->
									<view class="text-gray flex justify-between">
										{{item.goodName}}

										<view class="cu-capsule round">
											<view class='cu-tag bg-blue sm'>
												限量
											</view>
											<view class="cu-tag line-blue sm">
												{{item.goodsNum}}
											</view>
										</view>



									</view>
									<view class="text-gray text-sm flex justify-between">
										{{item.author_dictText}}
										<view class="cu-capsule radius">
											<view class='cu-tag bg-brown sm'>
												￥
											</view>
											<view class="cu-tag line-brown sm">
												{{item.price}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 其他服务 -->
			<view class="cu-bar bg-white solid-bottom margin-top" :style="[{animation: 'show 0.6s 1'}]">
				<view class="action">
					<text class='cuIcon-title text-yellow'></text>发售日历
				</view>
			</view>
			<view class="nav-list">
				<navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li bg-white shadow " navigateTo 
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]  " v-for="(item,index) in preSaleList" :key="index">
				 <text class="cu-avatar xxl" :style="'background-image:url('+item.goodsImg+');'"> </text>
					<view class="nav-title">{{item.goodName}}</view>
					<!-- <view class="cu-capsule round">
						<view class='cu-tag bg-blue sm'>
							限量
						</view>
						<view class="cu-tag line-blue sm">
							123
						</view>
					</view> -->
					<view class="text-sm ">
						{{item.author_dictText}}
						
					</view>
					<!-- <view class="nav-name">{{}}</view> -->
					
				</navigator>
			</view>
			<!-- <view v-for="item in preSaleList" :key="item.id" @click="toPage(item.id)">
				<view class="cu-card case no-card margin-bottom">
					<view class="cu-item shadow">
						<view class="image">
							<image :src="item.goodsImg" mode="widthFix"></image>
							<view class="cu-tag bg-brown">{{item.startTime}}</view>
					
						</view>
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="cu-avatar radius margin-left"
									style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);">
								</view>
								<view class="content flex-sub">
									
									<view class="text-gray flex justify-between">
										{{item.goodName}}

										<view class="cu-capsule round">
											<view class='cu-tag bg-blue sm'>
												限量
											</view>
											<view class="cu-tag line-blue sm">
												123
											</view>
										</view>



									</view>
									<view class="Dtext-sm flex justify-between">
										{{item.author_dictText}}
										<view class="cu-capsule radius">
											<view class='cu-tag bg-brown sm'>
												￥
											</view>
											<view class="cu-tag line-brown sm">
												{{item.price}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</scroll-view>
		<view class="cu-tabbar-height margin-top"></view>
	</view>
</template>

<script>
	import {
		us,
		os
	} from '@/common/util/work.js'
	import socket from '@/common/js-sdk/socket/socket.js'
	import apiService from '@/api/api.js';
	export default {
		name: 'home',
		props: {
			cur: String,
		},
		watch: {
			cur: {
				immediate: true,
				handler: function(val, oldVal) {
					console.log('cur', val, oldVal)
					this.initMenu()
				},
			},
		},
		data() {
			return {
				swiperList1: [{
						img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg',
						type: 'text'
					},
					{
						img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
						type: 'text'
					},
					{
						img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
					},
					{
						img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
					},
					{
						img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
					},
					{
						img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
					},
					{
						img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
					}
				],
				// staticDomainURL : this.$config.staticDomainURL+'/',	
				swiperList: [{
					id: 3,
					type: 'image',
					url: '/static/banner/banner3.jpg',
					link: ''
				}],
				middleApps: [{
						icon: 'line2_icon1.png',
						title: '审批',
						'text': '个人审批'
					},
					{
						icon: 'line2_icon2.png',
						title: '审批稿',
						'text': '审批草稿箱'
					},
				],
				usList: us.data,
				osList: os.data,
				msgCount: 0,
				dot: {
					mailHome: false
				},
				list: [{
						img: 'https://oss.colorui.org/cos/img/qtrr8.png',
						title: 'ColorStore - 个人小店',
						desc: '个人开店首选！有分类，有物流。包含多种活动，优惠券页面。',
						price: '799',
						like: 306,
						comment: 55
					},
					{
						img: 'https://oss.colorui.org/cos/img/beptn.png',
						title: 'ColorShop - 多用户商城',
						desc: '适配多语言,会员、商家多用户角色。对接国际物流，跨境电商立马搞定！',
						price: '2799',
						like: 156,
						comment: 24
					},
					{
						img: 'https://oss.colorui.org/cos/img/dkarj.png',
						title: 'ColorTakeaway - 外卖与骑手',
						desc: '多商家，多用户，另有骑手端。可做区域配送。',
						price: '4799',
						like: 173,
						comment: 32
					},
					{
						img: 'https://oss.colorui.org/cos/img/7grzo.png',
						title: 'ColorFinance - 金融钱包',
						desc: ' ',
						price: '4799',
						like: 316,
						comment: 46
					}
				],
				isCard: false,
				saleList: [], // 在售
				preSaleList: [], // 待售
				elements: [{
						title: '官方公告',
						name: 'layout',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '新闻中心',
						name: 'background',
						color: 'blue',
						cuIcon: 'colorlens'
					},
					{
						title: '活动预告',
						name: 'text',
						color: 'purple',
						cuIcon: 'font'
					},
					{
						title: '意见反馈',
						name: 'loading',
						color: 'green',
						cuIcon: 'loading2'
					}
				],
			}
		},
		methods: {
			initMenu() {
				console.log("-----------home------------")
				this.onSocketOpen()
				this.onSocketReceive()
				// this.loadCount(0);
				this.getPreSaleList(1);
				this.getSaleList(2);
				this.getHomeList()
				// this.staticDomainURL = this.$config.staticDomainURL
			},
			goPage(page) {
				if (!page) {
					return false;
				}
				if (page === 'annotationList') {
					this.msgCount = 0
				}
				this.dot[page] = false
				this.$Router.push({
					name: page
				})
			},
			// 启动webSocket
			onSocketOpen() {
				socket.init('websocket');
			},
			onSocketReceive() {
				var _this = this
				socket.acceptMessage = function(res) {
					// console.log("页面收到的消息", res);
					if (res.cmd == "topic") {
						//系统通知
						_this.loadCount('1')
					} else if (res.cmd == "user") {
						//用户消息
						_this.loadCount('2')
					} else if (res.cmd == 'email') {
						//邮件消息
						_this.loadEmailCount()
					}
				}
			},
			loadCount(flag) {
				console.log("loadCount::flag", flag)
				let url = '/sys/annountCement/listByUser';
				this.$http.get(url).then(res => {
					console.log("res::", res)
					if (res.data.success) {
						let msg1Count = res.data.result.anntMsgTotal;
						let msg2Count = res.data.result.sysMsgTotal;
						this.msgCount = msg1Count + msg2Count
						console.log("this.msgCount", this.msgCount)
					}
				})
			},
			loadEmailCount() {
				this.dot.mailHome = true
			},
			getTtemDotInfo(item) {
				if (item.page === 'annotationList' && this.msgCount > 0) {
					return this.msgCount
				}
				return '';
			},
			IsCard(e) {
				this.isCard = e.detail.value
			},
			getSaleList(status) {
				var resultList = []
				var param = {
					goodsStatus: status
				}
				apiService.mPreSellList(param).then(res => {
					console.log("res::", res)
					if (res.data.success) {
						this.saleList = res.data.result.records
						// console.log("this.msgCount", this.msgCount)
					}
				})
			},
			getPreSaleList(status) {
				var resultList = []
				var param = {
					goodsStatus: status
				}
				apiService.mPreSellList(param).then(res => {
					console.log("res::", res)
					if (res.data.success) {
						this.preSaleList = res.data.result.records
						// console.log("this.msgCount", this.msgCount)
					}
				})
			},
			getHomeList() {
				apiService.mHomeList().then(res => {
					console.log("res::", res)
					if (res.data.success) {
						this.swiperList = res.data.result.records
						// console.log("this.msgCount", this.msgCount)
					}
				})
			},
			toPage(id) {
				console.log(id)
				let parmas = {
					id: id
				}

				this.$router.push({
					name: 'goodsDetail',
					query: parmas
				})
			},
			getMore() {
				this.$router.push({
					name: 'annotationList'
				})
			},
			toChild(e) {
				uni.navigateTo({
					url: e.currentTarget.dataset.url
				})
			},
		}
	}
</script>

<style scoped>
	.cu-list.grid>.cu-item {
		padding: 0px 0px;
	}

	.line2-icon {
		width: 60px;
		height: 60px;
	}

	.cardTitle {
		color: #fff;
		padding: 90upx 60upx;
		font-size: 40upx;
		font-weight: 300;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}

	.cardTitle::before {
		content: "";
		position: absolute;
		width: 60upx;
		height: 6upx;
		border-radius: 20upx;
		background-color: #fff;
		display: block;
		top: 60upx;
		left: 50upx;
		transform: skew(10deg, 0deg);
	}

	.cardTitle::after {
		content: "";
		position: absolute;
		width: 140upx;
		border-radius: 6upx;
		height: 24upx;
		background-color: #fff;
		display: block;
		bottom: 76upx;
		left: 90upx;
		transform: skew(10deg, 0deg);
		opacity: 0.1;
	},
	.nav-list1 {
	    display: flex;
	    flex-wrap: nowrap;
	    padding: 0px 5px 0px;
	    justify-content: space-between;
	}
	.nav-li1{
		    padding: 8px;
		    border-radius: 6px;
		    /* width: 71%; */
		    margin: 0 2.5% 1px;
		    background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
		    background-size: cover;
		    background-position: center;
		    position: relative;
		    z-index: 1;
	}
</style>
